<template>
  <!-- 菜单表 马佳乐 2023年6月20日11点03分 -->
  <div>
    <el-card>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-s-tools" style="font-weight:bold"></i>  系统管理</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">菜单管理</a></el-breadcrumb-item>
        <el-breadcrumb-item></el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <el-card style="margin-top:20px">
    <el-col :span="2">
        <el-button type="success" @click="SysMenuDirectoryAddWindows">新增目录</el-button>
    </el-col>
    <br><br><br>
    <!-- 菜单表全查 马佳乐 2023年6月20日11点03分 -->
    <el-table
    :data="menuData"
    style="width: 100%"
    row-key="id"
    border
    lazy
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
      prop="id"
      label="菜单编号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="menuName"
      label="菜单名称"
      width="200">
    </el-table-column>
    <el-table-column
      prop="menuType"
      label="菜单类型"
      width="200">
      <template slot-scope="scope">
         <span v-if="scope.row.menuType == 1" >目录</span>
         <span v-if="scope.row.menuType == 2" >菜单</span>
         <span v-if="scope.row.menuType == 3" >按钮</span>
       </template>
    </el-table-column>
    <el-table-column
      prop="path"
      label="菜单路径"
      width="250">
    </el-table-column>
    <el-table-column
      prop="icon"
      label="图标"
      align="center"
      width="150">
      <template slot-scope="scope">
              <i style="font-size:18px"  :class="scope.row.icon"/>
            </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="360">
                <template slot-scope="scope">
                    <el-button @click="updatedelete(scope.row.id)" type="primary" size="small">删除</el-button>
                    <el-button type="primary" size="small" @click="SysMenuUpdateDirectoryWindows(scope.row)" 
                    v-if="scope.row.menuParentId == 0 && !scope.row.path">编辑该目录</el-button>
                    <el-button type="primary" size="small" @click="SysMenuSunUpdateWindows(scope.row)" 
                    v-if="scope.row.menuParentId !== 0">编辑子菜单</el-button>
                    <el-button type="primary"  icon="el-icon-plus" @click="SysMenuSunAddWindows" 
                    v-if="scope.row.menuParentId == 0 && !scope.row.path" size="small">新增子菜单</el-button>
                </template>
            </el-table-column>
  </el-table>

  <!-- 新增目录的弹窗 马佳乐 2023年6月20日18点19分 -->
  <el-dialog title="新增目录" :visible.sync="addDirectory" width="25%">
        <!-- 新增表单 马佳乐 2023年6月20日18点19分 -->
        <el-form :model="directoryrForm" ref="directoryrForm" label-width="20%" class="demo-ruleForm">
              <el-form-item label="菜单名称" prop="menuName">
              <el-input v-model="directoryrForm.menuName"></el-input>
            </el-form-item>
            <el-form-item label="菜单备注" prop="menuRemark">
              <el-input v-model="directoryrForm.menuRemark"></el-input>
            </el-form-item>
            <el-form-item label="图标">
                <el-select clearable v-model="directoryrForm.icon" placeholder="请选择图标">
                    <el-option
                        v-for="item in sysType"
                        :key="item.sysValue"
                        :label="item.sysName"
                        :value="item.sysValue">
                        <i :class="item.sysValue">{{ item.sysName }}</i>
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addDirectory = false">取 消</el-button>
            <el-button type="primary" @click="SysMenuDirectoryAdd()">确 定</el-button>
        </div>
    </el-dialog>
    <!-- 新增子菜单的弹窗 马佳乐 2023年6月20日19点17分 -->
  <el-dialog title="新增子菜单" :visible.sync="addSun" width="25%">
        <!-- 新增子菜单表单 马佳乐 2023年6月20日19点17分 -->
        <el-form :model="sunForm" ref="sunForm" label-width="23%" class="demo-ruleForm">
            <el-form-item label="菜单名称" prop="menuName">
              <el-input v-model="sunForm.menuName"></el-input>
            </el-form-item>
            <el-form-item label="路径" prop="path">
              <el-input v-model="sunForm.path"></el-input>
            </el-form-item>
            <el-form-item label="菜单备注" prop="menuRemark">
              <el-input v-model="sunForm.menuRemark"></el-input>
            </el-form-item>
            <!-- <el-form-item label="所属父级菜单" prop="menuParentId">
              <el-input v-model="sunForm.menuParentId"></el-input>
            </el-form-item> -->
            <el-form-item label="所属父级菜单">
                <el-select v-model="sunForm.menuParentId" placeholder="请选择所属父级菜单">
                    <el-option
                        v-for="item in menuSelectLogotype"
                        :key="item.id"
                        :label="item.menuName"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="父级菜单名称" prop="menuParentName">
              <el-input v-model="sunForm.menuParentName"></el-input>
            </el-form-item>
            <el-form-item label="图标">
                <el-select clearable v-model="sunForm.icon" placeholder="请选择图标">
                    <el-option
                        v-for="item in sysType"
                        :key="item.sysValue"
                        :label="item.sysName"
                        :value="item.sysValue">
                        <i :class="item.sysValue">{{ item.sysName }}</i>
                    </el-option>
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="图标" prop="icon">
              <el-input v-model="sunForm.icon"></el-input>
            </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addSun = false">取 消</el-button>
            <el-button type="primary" @click="SysMenuSunAdd()">确 定</el-button>
        </div>
    </el-dialog>

    <!-- 修改目录的弹窗 马佳乐 2023年6月21日13点23分 -->
  <el-dialog title="编辑目录" :visible.sync="updateDirectory" width="25%">
        <!-- 修改表单 马佳乐 2023年6月21日13点23分 -->
        <el-form :model="directoryrUpForm" ref="directoryrUpForm" label-width="20%" class="demo-ruleForm">
              <el-form-item label="菜单名称" prop="menuName">
              <el-input v-model="directoryrUpForm.menuName"></el-input>
            </el-form-item>
            <el-form-item label="菜单备注" prop="menuRemark">
              <el-input v-model="directoryrUpForm.menuRemark"></el-input>
            </el-form-item>
            <el-form-item label="图标">
                <el-select clearable v-model="directoryrUpForm.icon" placeholder="请选择图标">
                    <el-option
                        v-for="item in sysType"
                        :key="item.sysValue"
                        :label="item.sysName"
                        :value="item.sysValue">
                        <i :class="item.sysValue">{{ item.sysName }}</i>
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="updateDirectory = false">取 消</el-button>
            <el-button type="primary" @click="SysMenuUpdateDirectory()">确 定</el-button>
        </div>
    </el-dialog>

    <!-- 修改子菜单的弹窗 马佳乐 2023年6月21日14点47分 -->
  <el-dialog title="编辑子菜单" :visible.sync="upSun" width="25%">
        <!-- 修改子菜单表单 马佳乐 2023年6月21日14点47分 -->
        <el-form :model="upsunForm" ref="upsunForm" label-width="23%" class="demo-ruleForm">
            <el-form-item label="菜单名称" prop="menuName">
              <el-input v-model="upsunForm.menuName"></el-input>
            </el-form-item>
            <el-form-item label="路径" prop="path">
              <el-input v-model="upsunForm.path"></el-input>
            </el-form-item>
            <el-form-item label="菜单备注" prop="menuRemark">
              <el-input v-model="upsunForm.menuRemark"></el-input>
            </el-form-item>
            <!-- <el-form-item label="所属父级菜单" prop="menuParentId">
              <el-input v-model="sunForm.menuParentId"></el-input>
            </el-form-item> -->
            <el-form-item label="所属父级菜单">
                <el-select v-model="upsunForm.menuParentId" placeholder="请选择所属父级菜单">
                    <el-option
                        v-for="item in menuSelectLogotype"
                        :key="item.id"
                        :label="item.menuName"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="父级菜单名称" prop="menuParentName">
              <el-input v-model="upsunForm.menuParentName"></el-input>
            </el-form-item>
            <el-form-item label="图标">
                <el-select clearable v-model="upsunForm.icon" placeholder="请选择图标">
                    <el-option
                        v-for="item in sysType"
                        :key="item.sysValue"
                        :label="item.sysName"
                        :value="item.sysValue">
                        <i :class="item.sysValue">{{ item.sysName }}</i>
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="upSun = false">取 消</el-button>
            <el-button type="primary" @click="SysMenuSunUpdate()">确 定</el-button>
        </div>
    </el-dialog>
         <!-- 分页 马佳乐 2023年6月19日19点37分-->
         <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
        </el-pagination> -->
    </el-card>
  </div>
</template>

<script>
export default {
    data () {
        return {
            // 菜单表全查数据
            menuData:[],
            // 表格加载
            loading: true,
            // 添加目录数据
            directoryrForm: {},
            // 点开页面是添加目录窗口处于关闭状态
            addDirectory: false,
            // 添加子菜单数据
            sunForm: {},
            // 点开页面时添加子菜单窗口处于关闭状态
            addSun: false,
            // 父级目录下拉框数据
            menuSelectLogotype: {},
            // 图标下拉框数据
            sysType: {},
            // 修改目录数据
            directoryrUpForm: {},
            // 点开页面时修改目录窗口处于关闭状态
            updateDirectory: false,
            // 修改子菜单数据
            upsunForm: {},
            // 点开页面时修改子菜单窗口处于关闭状态
            upSun: false,
            // 模糊查询
            querymenu: {
                // 模糊查询菜单名称
                menuName: '',
                // 模糊查询菜单类型
                menuType: ''
            }
            // 分页
            // page: {
            //     total: 0,
            //     pageNum: 1,
            //     pageSize: 10
            // }
        }
    },
    mounted () {
        // 菜单表全查
        this.getmenu()
        // 下拉菜单（父级名称）
        this.getmenuSelect(),
        // 下拉菜单（图标）
        this.getdictSelect()
    },
    methods: {
        // 查询全部菜单信息
        getmenu () {
            this.$axios.get('/Menu/SysMenuBackList', {
                params: {
                    // 模糊查询菜单名称
                    menuName: this.querymenu.menuName,
                    // 模糊查询菜单类型
                    menuType: this.querymenu.menuType
                }
            }).then(res => {
                
                if (res.data.flag) {
                    this.menuData = res.data.data
                }
                this.loading = false
            }).catch(err => {
                this.Mymessage('error', err)
            })
        },
        // 添加目录
        SysMenuDirectoryAdd () {
            // 手动提交菜单
            this.$axios.post('/Menu/SysMenuDirectoryAdd', this.directoryrForm).then(res => {
                if (res.data.flag) {
                    this.Mymessage('success', '成功')
                    this.addDirectory = false
                    this.getmenu()
                } else {
                    this.Mymessage('waning', '失败')
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 添加目录窗口
        SysMenuDirectoryAddWindows () {
            // 添加方法
            this.directoryrForm = {}
            this.addDirectory = ''
        },
        // 添加子菜单
        SysMenuSunAdd () {
            // 手动提交菜单
            this.$axios.post('/Menu/SysMenuSunAdd', this.sunForm).then(res => {
                if (res.data.flag) {
                    this.Mymessage('success', res.data.data)
                    this.addSun = false
                    this.getmenu()
                } else {
                    this.Mymessage('waning', res.data.data)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 添加子菜单窗口
        SysMenuSunAddWindows () {
            // 添加方法
            this.sunForm = {}
            this.addSun = ''
        },
        // 获取下拉菜单信息（父级名称）
        getmenuSelect () {
            this.$axios.get('/Menu/MenuSelectList', {
                params: {
                    menuSelectLogotype: 'menuSelect'
                }
            }).then(res => {
                console.log(res)
                if (res.data.flag) {
                    this.menuSelectLogotype = res.data.data
                    console.log(this.menuSelectLogotype)
                }
            }).catch(err => {
                this.Mymessage(err, '获取失败')
            })
        },
        // 菜单表逻辑删除
        updatedelete (id) {
            this.$confirm('是否删除该用户信息', '提示', {
                confirmButtonClass: '确定',
                cancelButtonText: '取消',
                type: 'waning'
            }).then(() => {
                this.$axios.delete('/Menu/SysMenuUpdateDelete', {
                params: {
                    id: id
                }
                }).then(res => {
                if (res.data.flag) {
                    this.getmenu()
                    this.$message({ message: '删除成功!', type: 'success' })
                } else {
                    this.Mymessage('waning', '删除失败!')
                }
                }).catch(res => {
                this.Mymessage('error', '删除失败,请联系管理员')
                })
            }).catch(() => {
                this.Mymessage('info', '已取消删除')
            })
        },
        // 修改目录
        SysMenuUpdateDirectory () {
            // 手动提交菜单
            this.$axios.put('/Menu/SysMenuDirectoryUpdate', this.directoryrUpForm).then(res => {
                if (res.data.flag) {
                    debugger
                    this.Mymessage('success', res.data.data)
                    this.updateDirectory = false
                    this.getmenu()
                } else {
                    this.Mymessage('waning', res.data.data)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 修改目录窗口
        SysMenuUpdateDirectoryWindows (data) {
            // 修改方法
            this.directoryrUpForm = JSON.parse(JSON.stringify(data))
            this.updateDirectory = true
        },
        // 修改子菜单
        SysMenuSunUpdate () {
            // 手动提交菜单
            this.$axios.put('/Menu/SysMenuSunUpdate', this.upsunForm).then(res => {
                if (res.data.flag) {
                    debugger
                    this.Mymessage('success', res.data.data)
                    this.upSun = false
                    this.getmenu()
                } else {
                    this.Mymessage('waning', res.data.data)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 修改子菜单窗口
        SysMenuSunUpdateWindows (data) {
            // 修改方法
            this.upsunForm = JSON.parse(JSON.stringify(data))
            this.upSun = true
        },
        // 下拉菜单（图标）
        getdictSelect () {
            this.$axios.get('/Dict/SysSelectDict', {
                params: {
                    sysType: 'icon'
                }
            }).then(res => {
                console.log(res)
                if (res.data.flag) {
                    this.sysType = res.data.data
                    console.log(this.sysType)
                }
            }).catch(err => {
                this.Mymessage(err,'获取失败')
            })
        },
        // handleSizeChange (val) { // 分页
        //     this.page.pageSize = val
        //     this.getmenu()
        // },
        // handleCurrentChange (val) { // 分页
        //     this.page.pageNum = val
        //     this.getmenu()
        // },
        Mymessage (type, text) { // 弹窗提示
        this.$message({
            showClose: true,
            message: text,
            type: type
        })
        }
    }
}
</script>

<style scoped>
.el-col.el-col-6 {
    margin-top: 10px;
    margin-right: -30px;
}
/* .el-input__inner{
    padding-right: 175px;
} */
/* .el-input--suffix{
    padding-right: 175px;
} */
</style>
